﻿@section Styles{
    <style>
        .el-table__body tr.current-row > td {
            background-color: #f19944 !important;
            /* color: #f19944; */ /* 设置文字颜色，可以选择不设置 */
        }
    </style>
}
@section Scripts{
    <input type="hidden" value='@Html.Raw(ViewData["power"])' id="hidden_power" />
    <input type="hidden" value='@ViewData["isFindback"]' id="hidden_isFindback" />
    <script type="text/javascript">
        var power = JSON.parse(document.getElementById('hidden_power').value);
        var isFindback = document.getElementById('hidden_isFindback').value;
       
        var app = new Vue({
            el: "#app",
            data: function () {
                return {
                    power: power,
                    prefix: "/Admin/SalesSlip",
                    search: {
                        state: false,
                        vm: {
                            TestDemo: null
                        }
                    },
                    table: {
                        columns: [],
                        data: [],
                        page: 1,
                        rows: 15,
                        totalCount: 0,
                        selecteds: []//选中的行
                    },
                    roleId: null,
                    tree: [],
                    Pid: null
                }
            },
            //dom 创建
            created: function () {
                this.findList();
            },
            //dom渲染完成
            mounted: function () {

            },
            methods: {
                //获取列表
                findList: function () {
                    var _this = this;
                     this.Pid = null;
                    var path = _this.prefix + "/FindList/" + _this.table.page + "/" + _this.table.rows;

                    hzyAdmin.post(path, _this.search.vm, function (r) {
                        if (r.status != 1) return;
                        _this.table.data = r.data.DataSource;
                        _this.table.totalCount = r.data.TotalCount;
                        _this.table.columns = r.data.Cols;
                    });
                    if (_this.table.data.length > 0) {
                        _this.roleId = _this.table.data[0]._ukid;
                        _this.rowExpand();
                    }
                },
                //检索
                searchEvent: function () {
                    this.table.page = 1;
                    
                    this.findList();
                },
                //重置
                reset: function () {
                    this.table.page = 1;
                    
                    for (var item in this.search.vm) this.search.vm[item] = null;
                    this.findList();
                },
                //删除
                remove: function (id) {
                    var _this = this;
                    var ids = [];
                    if (id) {
                        ids.push(id);
                    } else {
                        var selecteds = this.table.selecteds;
                        if (selecteds.length == 0) return hzyAdmin.alert("请勾选要删除得数据!", "错误");
                        for (var i = 0; i < selecteds.length; i++) {
                            ids.push(selecteds[i]._ukid);
                        }
                    }
                    if (confirm("确定要删除吗?")) {
                        //请求接口删除
                        var path = _this.prefix + "/Delete";

                        hzyAdmin.post(path, ids, function (r) {
                            if (r.status != 1) return;
                            hzyAdmin.alert("删除成功!", "成功");
                            _this.findList();
                        });
                    }
                },
                openForm: function (id) {
                    var _this = this;
                    var path = _this.prefix + "/Info/" + (id ? id : '');

                    hzyAdmin.openPage(id ? '编辑' : '新建', path, function () {
                        _this.findList();//刷新列表
                    });


                },
                itemsOpenForm: function (id) {

                    var _this = this;
                    var selecteds = this.table.selecteds;
                    if (!_this.Pid) return hzyAdmin.alert("请选择销售单!", "错误");
                    var path = "/Admin/SalesSlipInfo_Items/Info/" + (id ? id : '');
                    path += "?PId=" + _this.Pid;
                    hzyAdmin.openPage(id ? '编辑' : '新建', path, function () {

                        var path = _this.prefix + "/GetSalesTimes/" + _this.Pid;

                        hzyAdmin.post(path, {}, function (r) {
                            if (r.status != 1) return;
                            _this.tree = r.data.salesitmesList;
                        });
                    });
                },
                itemsRemove: function (id) {
                    var _this = this;
                    var ids = [];
                    if (id) {
                        ids.push(id);
                    } else {
                        var selecteds = this.table.selecteds;
                        if (selecteds.length == 0) return hzyAdmin.alert("请勾选要删除得数据!", "错误");
                        for (var i = 0; i < selecteds.length; i++) {
                            ids.push(selecteds[i]._ukid);
                        }
                    }
                    if (confirm("确定要删除吗?")) {
                        //请求接口删除
                        var path = "/Admin/SalesSlipInfo_Items/Delete";

                        hzyAdmin.post(path, ids, function (r) {
                            if (r.status != 1) return;
                            hzyAdmin.alert("删除成功!", "成功");

                            var path = _this.prefix + "/GetSalesTimes/" + _this.Pid;

                            hzyAdmin.post(path, {}, function (r) {
                                if (r.status != 1) return;
                                _this.tree = r.data.salesitmesList;

                            });
                        });
                    }
                },
                //导出excel
                exportExcel: function () {
                    var _this = this;
                    hzyAdmin.download(_this.prefix + "/ExportExcel", _this.search.vm);

                },
                itemsPrinting: function () {
                    var _this = this;
                    if (!_this.Pid) return hzyAdmin.alert("请选择销售单打印!", "错误");
                    var path = "/Admin/SalesSlipInfo_Items/Printing/"+ (_this.Pid ? _this.Pid : '');
                    window.open(path, '_blank')

                    //hzyAdmin.openPage('打印', path, function () {


                    //});
                }
                ,
                //双击表格行
                row_dblclick: function (row, column, event) {

                    if (isFindback == 1) {
                        window.localStorage.setItem('findback', JSON.stringify(row));
                        setTimeout(function () {
                            hzyAdmin.layer.close(hzyAdmin.layer.getFrameIndex(window.name));
                        }, 100);
                    }
                },
                handleCurrentChange(val) {
                    var _this = this;
                    _this.Pid = val._ukid;
                    var path = _this.prefix + "/GetSalesTimes/" + val._ukid;

                    hzyAdmin.post(path, {}, function (r) {
                        if (r.status != 1) return;
                        _this.tree = r.data.salesitmesList;

                    });
                },
                getSummaries(param) {
                    const { columns, data } = param;
                    const sums = [];
                    columns.forEach((column, index) => {
                        if (index === 0) {
                            sums[index] = '总价';
                            return;
                        }
                        //if (column.property==='SalesSlipInfo_Items_ProdectNumber') {

                        //}
                        const values = data.map(
                            item => Number(item[column.property])

                        );
                        if (column.property == 'SalesSlipInfo_Items_ProdectNumber' || column.property == 'SalesSlipInfo_Items_ProdecMoney') {
                            sums[index] = values.reduce((prev, curr) => {

                                const value = Number(curr);
                                if (!isNaN(value)) {
                                    return prev + curr;
                                } else {
                                    return prev;
                                }
                            }, 0);
                            sums[index] = sums[index].toFixed(0);
                        } else {
                            sums[index] = 'N/A';
                        }
                    });

                    return sums;
                }
            }
        });
    </script>
}
<div class="m-20" id="app">
    <div class="container-fluid">
        <div class="card mb-20">
            <div class="card-body">
                <div class="row">
                    <div class="col-sm-4 form-group row">
                        <label class="col-md-4 col-form-label text-right">订单名称!</label>
                        <div class="col-md-8">
                            <input type="text" class="form-control" v-model="search.vm.SalesSlip_Name" placeholder="请输入 订单名称!">
                        </div>
                    </div>
                    <!--以下被隐藏-->
                    <!--<div class="col-sm-4 form-group row" v-show="search.state">
                        <label class="col-md-4 col-form-label text-right">Form参数</label>
                        <div class="col-md-8">
                            <input type="text" class="form-control" v-model="search.vm.AppLog_Form"
                                    placeholder="Form参数">
                        </div>
                    </div>-->
                    <!--检索操作-->
                    <div class="col-sm-4 text-center">
                        <button type="button" class="btn btn-primary" @@click="searchEvent">检索</button>&nbsp;
                        <button type="button" class="btn btn-secondary" @@click="reset">重置</button>&nbsp;
                        <button type="button" class="btn btn-link" @@click="search.state=!search.state" v-show="Object.keys(search.vm).length>2">
                            {{search.state?'收起':'展开'}}&nbsp;
                            <i class="fas fa-chevron-up" v-if="search.state"></i>
                            <i class="fas fa-chevron-down" v-else></i>
                        </button>
                    </div>

                </div>
            </div>
        </div>
        <div class="card m-0">
            <div class="card-body pl-0 pr-0">
                <div class="row ml-10 mr-10 mb-20">
                    <div class="col-sm-12">
                        <button class="btn btn-primary" @@click="openForm()" v-if="power.Insert">新建</button>
                        <button class="btn btn-danger" @@click="remove()" v-if="power.Delete">删除</button>
                        <button class="btn btn-primary" @@click="exportExcel()" v-if="power.GetExcel">导出Excel</button>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-12">
                        <el-table :data="table.data"
                                  @@selection-change="(array)=>{table.selecteds=array;}"
                                  @@row-dblclick="row_dblclick"
                                  size="medium"
                                  highlight-current-row
                                  @@current-change="handleCurrentChange"
                                  :header-cell-style="{background:'#fafafa'}">
                            <el-table-column type="index" width="50" fixed>
                            </el-table-column>
                            <el-table-column type="selection" width="50" fixed></el-table-column>
                            <!--根据查询接口自动加载头部信息 start-->
                            <el-table-column v-for="(item,index) in table.columns" :prop="item.DataIndex" :label="item.Title" :key="index" v-if="item.Show"></el-table-column>
                            <!--根据查询接口自动加载头部信息 end-->
                            <el-table-column fixed="right" label="操作" width="100">
                                <template slot-scope="scope">
                                    <el-link type="primary" @@click="openForm(scope.row._ukid)" v-if="power.Update">编辑</el-link>
                                    <el-link type="danger" @@click="remove(scope.row._ukid)" v-if="power.Delete">删除</el-link>
                                </template>
                            </el-table-column>
                        </el-table>
                        <el-pagination @@size-change="(val)=>{table.rows=val;findList();}"
                                       @@current-change="(val)=>{table.page=val;findList();}"
                                       :current-page="table.page"
                                       :page-sizes="[10, 15, 20, 50, 100, 200, 300, 400, 1000]"
                                       :page-size="table.rows"
                                       layout="total, sizes, prev, pager, next, jumper"
                                       :total="table.totalCount"
                                       class="mt-10 ml-10">
                        </el-pagination>
                    </div>
                </div>
            </div>
        </div>
        <div class="card m-0">
            <div class="card-body pl-0 pr-0">
                <div class="row ml-10 mr-10 mb-20">
                    <div class="col-sm-12">
                        <button class="btn btn-primary" @@click="itemsOpenForm()" v-if="power.Insert">新建</button>
                        <button class="btn btn-danger" @@click="itemsRemove()" v-if="power.Delete">删除</button>
                        <button class="btn btn-primary" @@click="itemsPrinting()">打印订单</button>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-12">
                        <el-table :data="tree" @@selection-change="(array)=>{table.selecteds=array;}"
                                  row-key="_ukid" :header-cell-style="{background:'#fafafa'}"
                                  show-summary :summary-method="getSummaries">
                            <el-table-column type="index" width="50" fixed></el-table-column>
                            <el-table-column type="selection" width="50" fixed></el-table-column>
                            <!--根据查询接口自动加载头部信息 start-->
                            <el-table-column prop="Product_Code" label="商品编号"></el-table-column>
                            <el-table-column prop="Product_Name" label="商品名称"></el-table-column>
                            <el-table-column prop="Product_Specs" label="商品规格"></el-table-column>
                            <el-table-column prop="Product_Colour" label="颜色"></el-table-column>
                            <el-table-column prop="SalesSlipInfo_Items_Enclosure" label="罩壳配置"></el-table-column>
                            <el-table-column prop="SalesSlipInfo_Items_ProdectUnit" label="单位"></el-table-column>
                            <el-table-column prop="SalesSlipInfo_Items_ProdecUnitPrice" label="单价"></el-table-column>
                            <el-table-column prop="SalesSlipInfo_Items_Width" label="宽"></el-table-column>
                            <el-table-column prop="SalesSlipInfo_Items_Height" label="高"></el-table-column>
                            <el-table-column prop="SalesSlipInfo_Items_ProdectNumber" label="数量"></el-table-column>
                            <el-table-column prop="SalesSlipInfo_Items_ProdecMoney" label="金额"></el-table-column>

                            <!-- <el-table-column prop="Menu_CreateTime" label="创建时间" width="100"></el-table-column> -->
                            <!-- <el-table-column v-for="(item,index) in table.columns" :prop="item.DataIndex"
                            :label="item.Title" :key="index" v-if="item.Show"></el-table-column> -->
                            <!--根据查询接口自动加载头部信息 end-->
                            <el-table-column fixed="right" label="操作" width="100" v-if="power.Update || power.Delete">
                                <template slot-scope="scope">
                                    <el-link type="primary" @@click="itemsOpenForm (scope.row._ukid)"
                                             v-if="power.Update">编辑</el-link>
                                    <el-link type="danger" @@click="itemsRemove(scope.row._ukid)"
                                             v-if="power.Delete">删除</el-link>
                                </template>
                            </el-table-column>
                        </el-table>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>